<template>
  <!--面包屑-->
    <el-row>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">主页</el-breadcrumb-item>
                <el-breadcrumb-item to="/wisdomeat">智慧食堂</el-breadcrumb-item>
                <el-breadcrumb-item>学生管理</el-breadcrumb-item>
                <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-row>
  <!--搜索区-->
    <el-row>
        <el-col :span="24">
            <el-form label-width="90px">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="订单编号">
                            <el-input v-model="query.roNumber"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="商家名称">
                            <el-input v-model="query.bName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="订单状态">
                            <el-select v-model="query.roState.id">
                                <el-option v-for="s in orderStateList" :label="s.osName" :key="s.id"
                                           :value="s.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="付款方式">
                            <el-select v-model="query.roPayment.id">
                                <el-option v-for="p in paymentList" :label="p.pname" :key="p.id"
                                           :value="p.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="success" style="width: 100%;" @click="btnQueryClick">
                               搜索
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
    </el-row>
  <!--    数据表格-->
    <el-row>
        <el-table :data="orderList" stripe border style="width: 99%">
            <el-table-column type="index" label="序号" align="center" width="60px"/>
            <el-table-column label="订单编号" align="center">
                <template #default="scope">
                    <el-image :src="scope.row.imageUrl" :preview-src-list="[scope.row.imageUrl]"  preview-teleported
                    @click="scanQrCode(scope.row)"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="roContent" label="订单内容" align="center"/>
            <el-table-column prop="bname" label="商家名称" align="center"/>
            <el-table-column prop="roPrice" label="价格" align="center">
                <template #default="scope">
                    <strong>￥{{scope.row.roPrice}}</strong>
                </template>
            </el-table-column>
            <el-table-column prop="roCount" label="数量" align="center"/>
            <el-table-column prop="osName" label="订单状态" align="center">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.roStateId===1">{{scope.row.osName}}</el-tag>
                    <el-tag type="primary" v-if="scope.row.roStateId===2">{{scope.row.osName}}</el-tag>
                    <el-tag type="success" v-if="scope.row.roStateId===3">{{scope.row.osName}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="pname" label="付款方式" align="center"/>
            <el-table-column prop="roBuyTime" label="下单时间" align="center" :formatter="FormatTime"/>
<!--            <el-table-column label="操作" align="center">-->
<!--                <template #default="scope">-->
<!--                    <el-button type="text" @click="btnConfirmClick(scope.row)">-->
<!--                        确认收货-->
<!--                    </el-button>-->
<!--                    <el-button type="text" @click="scanQrCode(scope.row)">-->
<!--                        扫描-->
<!--                    </el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
        </el-table>
<!--        逻辑分页-->
        <el-config-provider>
            <el-pagination
                    :current-page="page.currentPage"
                    :page-size="page.pageSize"
                    background
                    layout="total, prev, pager, next,jumper"
                    :total="page.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </el-config-provider>
    </el-row>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";
import moment from "moment/moment.js";


export default {
    name: "SOrderList",
    data() {
        return {
            sNumber:'', //学生编号
            orderList: [], //订单列表
            paymentList: [], //支付方式
            orderStateList: [], //订单状态
            scanResult:null,
            // 搜索框信息
            query: {
                roNumber: '',
                bName: '',
                roState: {
                    id: -1
                },
                roPayment: {
                    id: -1
                }
            },
            page: {
                currentPage: 1, //当前页码，初始页码为1
                totalCount: 2, //总数居条数，根据接口获取数据长度
                pageSize: 5, //每页显示的条数
                allTableData: [] //全部表格数据
            },
        }
    },
    methods: {
        //获取订单列表
        initTable() {
            this.sNumber=sessionStorage.getItem('snumber')
            if(this.sNumber==null){
                ElMessage.error({
                    message:'未找到用户信息，请先登录',
                    duration:1000
                });
            }else {
                axios({
                    url: 'http://localhost:8888/restaurantorders/getRorderListByStudent',
                    method: 'get',
                    params: {sNumber: this.sNumber}
                }).then((res) => {
                    this.page.allTableData = res.data.data;
                    this.page.totalCount = res.data.total;
                    this.handleCurrentChange(1);
                })
            }
        },
        //获取订单状态
        initOrderState() {
            axios({
                url: 'http://localhost:8888/orderstate/getOrderStateList',
                method: 'get',
            }).then((res) => {
                this.orderStateList = res.data.data;
                this.orderStateList.unshift({
                    id: -1,
                    osName: '--全部状态--'
                })
            })
        },
        //获取付款方式
        initPayment() {
            axios({
                url: 'http://localhost:8888/payment/getPaymentList',
                method: 'get',
            }).then((res) => {
                this.paymentList = res.data.data;
                this.paymentList.unshift({
                    id: -1,
                    pname: '--全部付款方式--'
                })
            })
        },
        //创建二维码
        createQRCode(row){
            axios({
                url:'http://localhost:8888/home/qrnologo',
                responseType:'blob',
                method:'post',
                params:{
                    content:row.roNumber,
                }
            }).then((res)=>{
                row.imageUrl = URL.createObjectURL(new Blob([res.data]));
            })
        },
        //确认收获
        btnConfirmClick(row) {
            axios({
                url: 'http://localhost:8888/restaurantorders/confirmROrder',
                method: 'post',
                params: {
                    roNumber: row.roNumber,
                }
            }).then((res) => {
                if (res.data.success) {
                    ElMessage.success({
                        message: '收货成功',
                        duration: 1000
                    });
                }
                this.initTable();
            })
        },
        //不定查询
        btnQueryClick() {
            if(this.sNumber==null){
                ElMessage.error({
                    message:'未找到用户信息，请先登录',
                    duration:1000
                });
            }else {
                axios({
                    url: 'http://localhost:8888/restaurantorders/getRorderListByStudentExample',
                    method: 'get',
                    params: {
                        roSNumber: this.sNumber,
                        roNumber: this.query.roNumber,
                        bName: this.query.bName,
                        roPaymentId: this.query.roPayment.id,
                        roStateId: this.query.roState.id
                    }
                }).then((res) => {
                    this.page.allTableData = res.data.data;
                    this.page.totalCount = res.data.total;
                    this.handleCurrentChange(1)
                })
            }
        },
        //每页显示的条数
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize //改变每页显示的条数
            this.page.currentPage = 1 //每次变换单页条数后，将页面切换至第一页
            this.handleSizeChange(1) //获取第一页数据
        },
        //显示当前页数据
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage //更新当前页数据
            const pageSize = this.page.pageSize //每页数据量
            this.orderList = [] //清空表绑定的数据
            //获取当前页数据范围：（当前页-1）*每页数据-当前页*每页数据
            this.orderList = this.page.allTableData.slice((((currentPage - 1) * pageSize)), (currentPage * pageSize))
            //循环调用创建二维码，将行值赋予
            this.orderList.forEach(row=>{
                this.createQRCode(row);
            })
        },
        //规定时间形式
        FormatTime(row, column) {
            var date = row[column.property];
            return moment(date).format("YYYY-MM-DD HH:mm:ss");
        },
        scanQrCode(row) {
            axios({
                url:'http://localhost:8888/home/scan',
                method:'post',
                params:{roNumber:row.roNumber}
            }).then((res)=>{
                this.scanResult = res.data;
                if(this.scanResult==='二维码已失效'){
                    ElMessage.error({
                        message:'订单完成，二维码已失效'
                    })
                }else {
                    ElMessage.success({
                        message:'订单完成，收货成功'
                    })
                }
                this.initTable();
            })
        },
    },
    mounted() {
        this.initTable();
        this.initPayment();
        this.initOrderState();
    }
}
</script>

<style scoped>
.breadcrumb {
    padding: 10px;
}
</style>